<template>
	<view>
		<view class="top-back">
			<cu-custom :isBack="true" bgColor="bg-shadeTop text-white">
				<block slot="backText"></block>
			</cu-custom>
		</view>
		<swiper class="screen-swiper square-dot text-scarlet" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000" duration="500">
			<swiper-item v-for="(item,index) in articleListBanner" :key="index" @tap="jumpPage(item.id)">
				<image :src="item.picUrl"></image>
			</swiper-item>
		</swiper>
		<scroll-view scroll-x class="bg-white nav padding-lr-sm solid-bottom">
			<view class="flex text-center bg-white">
				<view :class="'cu-item flex-sub ' + (-1==tabCur?'cur text-'+theme.themeColor:'')" @tap="getHot()">热门</view>
				<view :class="'cu-item flex-sub ' + (index==tabCur?'cur text-'+theme.themeColor:'')" v-for="(item, index) in articleCategoryList"
				 :key="index" @tap="tabSelect(item.id, index)">{{item.name}}</view>
			</view>
		</scroll-view>
		<view class="cu-card case bg-white padding-lr">
			<navigator class="flex justify-between padding-tb-lg align-center solid-bottom" v-for="(item,index) in articleList" :key="index" hover-class="none" :url="'/pages/article/article-info/index?id=' + item.id">
				<view class="padding-right-sm">
					<view class="text-black overflow-1 text-lg text-bold">{{item.articleTitle}}</view>
					<view class="overflow-2 text-df margin-top-xs">{{item.articleIntroduction}}</view>
					<view class="text-gray text-sm flex justify-between margin-top-xs">
						<view class="text-sm text-gray">{{item.authorName}}</view>
						<view class="text-sm text-gray">{{item.updateTime}}</view>
					</view>
				</view>
				<view class="article-list-image radius">
					<image class="radius" :src="item.picUrl" mode="aspectFill"></image>
				</view>
			</navigator>
			<view :class="'cu-load bg-white ' + (loadmore?'loading':'over')"></view>
		</view>
	</view>
</template>

<script>
	/**
	 * Copyright (C) 2018-2019
	 * All rights reserved, Designed By www.joolun.com
	 * 注意：
	 * 本软件为www.joolun.com开发研制，未经购买不得使用
	 * 购买后可获得全部源代码（禁止转卖、分享、上传到码云、github等开源平台）
	 * 一经发现盗用、分享等行为，将追究法律责任，后果自负
	 */
	const util = require("utils/util.js");
	const app = getApp();
	import api from 'utils/api'
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				theme: app.globalData.theme, //全局颜色变量
				page: {
					searchCount: false,
					current: 1,
					size: 10,
					ascs: '',
					//升序字段
					descs: ''
				},
				parameter: {},
				loadmore: true,
				articleListBanner: [],
				articleList: [],
				articleCategoryList: [],
				tabCur: -1,
				categoryId: null
			}
		},
		
		onLoad(options) {
			// 保存别人分享来的 userCode
			util.saveSharerUserCode(options);
			app.initPage().then(res => {
				//查出banner文章
				this.articlePageBanner({
					isBanner: '1'
				})
				//查出热门文章
				this.getHot()
				//查出文章分类
				this.articleCategoryPage()
			});
		},
		
		onReachBottom() {
			if (this.loadmore) {
				this.page.current = this.page.current + 1;
				this.articlePage();
			}
		},
		
		methods: {
			articlePageBanner(parameter) {
				api.articlePage(Object.assign({}, {
					searchCount: false,
					current: 1,
					size: 5,
					ascs: '',
					//升序字段
					descs: ''
				}, util.filterForm(parameter))).then(res => {
					let articleListBanner = res.data.records;
					this.articleListBanner = articleListBanner;
				});
			},
			articlePage() {
				api.articlePage(Object.assign({}, this.page, util.filterForm(this.parameter))).then(res => {
					let articleList = res.data.records;
					this.articleList = [...this.articleList, ...articleList];
					if (articleList.length < this.page.size) {
						this.loadmore = false;
					}
				});
			},
			articleCategoryPage() {
				api.articleCategoryPage({
					searchCount: false,
					current: 1,
					size: 10,
					ascs: '',
					//升序字段
					descs: ''
				}).then(res => {
					let articleCategoryList = res.data.records;
					this.articleCategoryList = articleCategoryList;
				});
			},
			getHot(){
				this.tabCur = -1
				this.articleList = []
				this.loadmore = true
				this.page.current = 1
				this.parameter = {
					categoryId: null,
					isHot: '1'
				}
				this.articlePage()
			},
			tabSelect(id, index){
				this.tabCur = index
				this.articleList = []
				this.loadmore = true
				this.page.current = 1
				this.parameter = {
					categoryId: id,
					isHot: null
				}
				this.articlePage()
			},
			jumpPage(id) {
				uni.navigateTo({
					url: '/pages/article/article-info/index?id='+id
				});
			}
		}
	}
</script>

<style>
	page{
		background-color: #fff;
	}
	
	.nav .cu-item.cur{
		border-bottom: 8rpx solid;
		font-size: 16px;
		font-weight: 400;
		color: #f42121;
	}
	
	.top-back{
		position: fixed;
		z-index: 99;
	}
	
	.screen-swiper{
		min-height: 560rpx !important;
	}
	
	.article-list-image{
		width: 200rpx; 
		height: 150rpx;
	}
	
	.article-list-image image{
		width: 200rpx; 
		height: 150rpx;
	}
</style>
